<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<%@ taglib prefix="f" uri="http://www.springframework.org/tags/form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%
	String path=request.getContextPath();
%>    

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<link href="/resources/css/bootstrap-4.3.1/css/bootstrap.css" rel="stylesheet">
	<script type="text/javascript" src="/resources/js/jquery-3.2.1/jquery.js"></script>
	<script type="text/javascript" src="/resources/js/jqueryvalidate/jquery.validate.js"></script>
	<script type="text/javascript" src="/resources/js/jqueryvalidate/localization/messages_zh.js"></script>
	<script type="text/javascript" src="/resources/css/bootstrap-4.3.1/js/bootstrap.js"></script>	
</head>
<body>
	
	<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
		<a class="navbar-brand" href="/">
		   <img src="/resources/js/images/logo.png" width="30" height="30" class="d-inline-block align-top" alt="">
		</a>
		<a class="navbar-brand" href="#">首页</a>
		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
		  <span class="navbar-toggler-icon"></span>
		</button>
	
	  <div class="collapse navbar-collapse" id="navbarSupportedContent">
	    <ul class="navbar-nav mr-auto">
	      <li class="nav-item active">
	        <a class="nav-link" href="#">最热新闻<span class="sr-only">(current)</span></a>
	      </li>
	      
	      
	      <li class="nav-item">
	        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">功能开发中</a>
	      </li>
	    </ul>
	    
	    <!--搜索框开始  -->
	    <%-- <form class="form-inline my-2 my-lg-0">
	      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
	      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
	    </form> --%>
	    <!--搜索框结束  -->
	    <ul  class="navbar-nav">
	    <c:choose>
	    	<c:when test="${empty sessionScope.userKey }">
	    		<li class="nav-item">
	       		 <a class="nav-link" href="/user/login">登陆</a>
	      		</li>
	    	</c:when>
	    	<c:otherwise>
		    	<li class="nav-item dropdown">
			        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			          	个人中心
			        </a>
			        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
			          <a class="dropdown-item" href="#">设置</a>
			          <a class="dropdown-item" href="/user/home">个人中心</a>
			          
			          <a class="dropdown-item" href="#">登出</a>
			        </div>
     			 </li>
	    	</c:otherwise>
	    </c:choose>
	    </ul>
	  </div>
	</nav>
	<!--结束导航条  -->
	
	<div class = "container-fluid" style = "margin-top:20px">
		<div class = "row">
			<div class = "col-md-3"></div>
			<div class = "col-md-6">
				<h4>${article.title }</h4>
				${article.content }
				<hr>
				<h5>评论区</h5>
				  <c:choose>
	    			<c:when test="${empty sessionScope.userKey }">
	    				登陆以后才可以评论哦！<a href = "/user/login">登陆</a>
	    			
	    			</c:when>
	    			<c:otherwise>
	    			<!--评论区  -->
			    		<div>
							<textarea rows="5" cols="60" id="commentContent">
							</textarea>
							<input type="button" value="评论" onclick="addComment()">
						</div>
	    			<!--评论区  -->
	    			</c:otherwise>	
				</c:choose>
				<div id = "commentList">
					
				
				
				
				
				</div>
				
				
			</div>
			<div class = "col-md-3"></div>
			
		
		
		</div>
	</div>
	

	<!--尾部  -->
	<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
		<p class = "collapse navbar-collapse justify-content-center"><font color = "white">开源项目，欢迎指导</font></p>
	</nav>
	<!--尾部  -->
	<script type="text/javascript">
		
		function showComment(pageNum){
			
			alert("11");
			
			$("#commentList").load("/article/showCommentList?articleId=${article.id}&pageNum="+pageNum);
				
		}
		
		showComment(1);
	
		
		function addComment(){
			
			var content = $("#commentContent").val();
			
			alert(content);
			
			$.post("/article/addComment",{articleId:'${article.id}',content:content},function(msg){
				
				if(msg.id == 0){
					alert("评论成功！");
					console.log(msg);
					showComment(1);
				}else{
					alert("评论失败！");
				}
				
			},"json")
			
		}
	
	
	</script>


</body>
</html>